<template>
  <div class="pull-to-refresh">
    <pull-to :top-load-method="refresh">
      <ul>
        <li
          v-for="item in dataList"
          :key="item"
        >{{ item }}</li>
      </ul>
    </pull-to>
  </div>
</template>

<script>
import PullTo from 'vue-pull-to'
export default {
  components: {
    PullTo
  },
  data() {
    return {
      dataList: [1, 2, 4, 5, 3, 7, 65]
    }
  },
  methods: {
    refresh(loaded) {
      setTimeout(() => {
        const r = Math.random()
        if (r > 0.1) {
          for (let i = 0; i < 10; i++) {
            this.dataList.unshift(new Date().getTime() + i)
          }
          loaded('done')
        } else {
          loaded('fail')
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
.pull-to-refresh {
  height: 100vh;
}
ul {
  min-height: 100vh;
}
</style>
